<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js" charset="utf-8"></script>

</head>
<body>

<div id="app">
    <my-aaa></my-aaa>
</div>

<script>

//    组件的另一种编写方式
//    Vue.component('aaa',{
//        template:'<h3>我是标题3</h3>'
//    })

    var aa = Vue.extend({
        template:'<h3 @click="change">{{msg}}</h3>',
        data(){
            return{
                msg:'这是一个标题'

            }
        },
        methods:{
            change(){
                this.msg='我改变了'
            }
        }
    })

    new Vue({
        el:'#app',
        data:{
        },
        components:{ //局部组件
            'my-aaa':aa //最好名字加个引号
        }
    })
</script>

</body>
</html>